
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部弹出面板</title>
    <style>
        .bottom-panel-mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        
        .bottom-panel-mask.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .bottom-panel-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: -100%;
            background: #fff;
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
            z-index: 1000;
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .bottom-panel-container.show {
            transform: translateY(-100%);
        }
        
        .bottom-panel-header {
            padding: 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background: white;
        }
        
        .bottom-panel-close {
            font-size: 24px;
            color: #999;
            cursor: pointer;
        }
        
        .bottom-panel-body {
            padding: 16px;
        }
        
        @media (min-width: 768px) {
            .bottom-panel-container {
                left: 50%;
                right: auto;
                width: 400px;
                transform: translateX(-50%);
            }
            
            .bottom-panel-container.show {
                transform: translate(-50%, -100%);
            }
        }
		
		dialog {
		  width: 300px;
		  background-color: #f1f1f1;
		  border: 1px solid #ccc;
		  padding: 1rem;
		}
		 
		dialog::backdrop {
		  background-color: rgba(0, 0, 0, 0.3);
		}
    </style>
</head>
<body>
    <div class="bottom-panel-mask" id="bottomPanelMask"></div>
    <div class="bottom-panel-container" id="bottomPanelContainer">
        <div class="bottom-panel-header">
            <h3 id="bottomPanelTitle">面板标题</h3>
            <span class="bottom-panel-close" id="bottomPanelClose">×</span>
        </div>
        <div class="bottom-panel-body" id="bottomPanelContent">
            <!-- 动态内容插入位置 -->
        </div>
    </div>
	
	<button id="test">点我呀</button>
	<dialog id="dialog">
	  <p>Greetings, one and all!</p>
	  <form method="dialog">
	    <button>OK</button>
	  </form>
	</dialog>

    <script>
        class BottomPanel {
            constructor(options = {}) {
                this.mask = document.getElementById('bottomPanelMask');
                this.container = document.getElementById('bottomPanelContainer');
                this.titleEl = document.getElementById('bottomPanelTitle');
                this.contentEl = document.getElementById('bottomPanelContent');
                this.closeBtn = document.getElementById('bottomPanelClose');
                
                // 初始化配置
                this.options = {
                    title: options.title || '面板标题',
                    content: options.content || '',
                    onClose: options.onClose || null,
                    onOpen: options.onOpen || null,
                    closeOnMaskClick: options.closeOnMaskClick !== false
                };
                
                // 绑定事件
                this.closeBtn.addEventListener('click', () => this.close());
                if(this.options.closeOnMaskClick) {
                    this.mask.addEventListener('click', () => this.close());
                }
                
                // 初始化内容
                this.updateTitle(this.options.title);
                this.updateContent(this.options.content);
            }
            
            open() {
                this.mask.classList.add('show');
                this.container.classList.add('show');
                document.body.style.overflow = 'hidden';
                
                if (typeof this.options.onOpen === 'function') {
                    this.options.onOpen();
                }
                return this;
            }
            
            close() {
                this.mask.classList.remove('show');
                this.container.classList.remove('show');
                document.body.style.overflow = '';
                
                if (typeof this.options.onClose === 'function') {
                    this.options.onClose();
                }
                return this;
            }
            
            updateContent(content) {
                if(typeof content === 'string') {
                    this.contentEl.innerHTML = content;
                } else if(content instanceof HTMLElement) {
                    this.contentEl.innerHTML = '';
                    this.contentEl.appendChild(content);
                }
                return this;
            }
            
            updateTitle(title) {
                this.titleEl.textContent = title;
                return this;
            }
            
            setOptions(options) {
                Object.assign(this.options, options);
                if(options.title) this.updateTitle(options.title);
                if(options.content) this.updateContent(options.content);
                return this;
            }
        }

        // 全局挂载
        window.BottomPanel = BottomPanel;
    </script>
	
	<script>
		const dialogModal = document.getElementById('dialog');
		const panel = new BottomPanel({
		  title: '默认标题',
		  content: '<p>初始内容</p>'
		});
		document.getElementById('test').addEventListener('click',function(){
			// 初始化面板
			dialogModal.show()
			//panel.open();
			//panel.updateContent('<div>新内容<div class="btn">按钮</div></div>');
		})
		
	</script>
</body>
</html>
